<template>
  <div class="order-item">
    <div class="order-item-inner">
      <img class="item-img" :src=data.poi_pic />
      <div class="item-right">
        <div class="item-top" >
          <p class="order-name one-line">{{data.poi_name}}</p>
          <div class="arrow"></div>
          <div class="order-state">{{data.status_description}}</div>
        </div>
        <div class="item-bottom">
          <template v-for="(itemdata,index) in data.product_list">
            <div class="product-item" >{{itemdata.product_name}}<div class="p-count">x{{itemdata.product_count}}</div></div>
            <div  class="product-item" v-if="index== data.product_list.length">
              <span>...</span>
              <div class="p-total-count">
                总计{{itemdata.product_count}}个菜，实付
                <span class="total-price">¥{{data.total}}</span>
              </div>
            </div>
          </template>


        </div>
      </div>
    </div>
    <div v-if="!data.is_comment" class="evaluation clearfix">
      <div class="evaluation-btn" @click="eva">评价</div>
    </div>
  </div>
</template>

<script>
  //订单详情
  import  StarScore from "@/components/common/StarScore"
  export default {
    name: 'OrderItem',
    computed: {
    },
    components:{
      StarScore
    },
    props:['data'],
    methods:{
      eva(){
        this.$router.push('evaluation')
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'
  .order-item {
    border-top: (0.26rem) solid #efefef;
    padding-bottom: (0.36rem);
    .order-item-inner {
      display: flex;
      padding-bottom: (0.36rem);
      border-bottom: 1px solid #e0e0e0;
    }
    .item-img {
      width: (0.8rem);
      height: (0.8rem);
      margin-top: (0.16rem);
      margin-left: (0.32rem);
      border-radius: 50%;
    }
    .item-right {
      flex: 1;
      margin-left: (0.3rem);
    }
    .item-top {
      height: (1.1rem);
      padding-top: (0.04rem);
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e0e0e0;
    }
    .order-name {
      font-size: (16px);
      width: (3.6rem);
      height: (0.32rem);
      font-weight: 600;
    }
    .arrow {
      width: (0.16rem);
      height: (0.16rem);
      border: 1px solid #999;
      border-width:  1px 1px 0 0;
      transform: rotate(45deg);
      -webkit-transform: 45deg;
    }
    .order-state {
      margin-left:(1.6rem);
      font-size: (14px);
      color: #999;
    }
    .product-item {
      font-size: (14px);
      color: #666;
      margin-top: (0.24rem);

    }
    .p-count {
      float: right;
      margin-right: (0.3rem)
    }

    .p-total-count {
      float: right;
      margin-right: (0.3rem)
      font-size: 12px;
    }
    .total-price {
      font-size: 14px;
      color: #151515;
      margin-left: (0.04rem);
      letter-spacing: 1px;
    }

    .evaluation {
      padding-top:(0.2rem);
      padding-bottom: (0.2rem);
    }
    .evaluation-btn {
      float: right;
      width: (2rem);
      height: (0.64rem);
      color: #6b450a;
      background-color: #ffd161;
      font-size: 14px;
      line-height: (0.64rem);
      text-align: center;
      margin-right: 0.2rem;
    }
  }
</style>
